<template>
  <el-dialog title="添加|编辑" :visible.sync="isVisible">
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" autocomplete="off" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="managerId">
        <el-select
          v-model="form.managerId"
          style="width: 100%"
          placeholder="请选择活动区域"
          @blur="validateManagerId"
        >
          <el-option
            v-for="item in managerList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" type="textarea" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="isVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getManagerList, addDepartmentme, editDepartment } from '@/api/department'
export default {
  name: 'Modal',
  components: {},
  props: {
    data: {
      type: Array,
      require: true
    }
  },
  data() {
    // function validateName(rule, value, callback) {
    //   if (true) {
    //     // 成功
    //     callback()
    //   } else {
    //     // 失败
    //     return callback(new Error('年龄不能为空'))
    //   }
    // }
    // 必须使用箭头函数才能访问到props和data里的数据（原因：这个方法最终是被element-ui调用，所以this指向问题）
    const validateName = (rule, value, callback) => {
      let newData
      if (this.form.id) {
        // 编辑
        // 去除自己的数据
        newData = this.data.filter(item => item.id !== this.form.id)
      } else {
      // 新增
        newData = this.data
      }
      // 第一种 （最好的）
      if (newData.some(item => item.name === value)) {
        // 失败
        return callback(new Error('部门名称不能重复'))
      } else {
        // 成功
        callback()
      }
    }
    // 第二种
    // const sameArr = this.data.filter(item => item.name === value)
    // if (sameArr.length === 0) {
    //   // 成功
    //   callback()
    // } else {
    //   // 失败
    //   return callback(new Error('部门名称不能重复'))
    // }

    // 第三种  find只会找一个
    // const same = this.data.find(item => item.name === value)
    // if (same === null) {
    //   // 成功
    //   callback()
    // } else {
    //   // 失败
    //   return callback(new Error('部门名称不能重复'))
    // }
    return {
      managerList: [],
      isVisible: false,
      // form里的属性名不能随便写，得去看api文档，原因：我们下面提交数据时直接把整个form对象发送给服务器
      form: {
        name: '',
        code: '',
        managerId: '',
        introduce: '',
        pid: ''
      },
      rules: {
        // name: { required: true, message: '请输入部门名称', trigger: 'blur' },
        name: [
          // 专门校验非空
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          // 专门校验部门名称不能重复
          { validator: validateName, trigger: 'blur' }
        ],
        code: { required: true, message: '请输入部门编码', trigger: 'blur' },
        managerId: { required: true, message: '请选择部门负责人', trigger: 'blur' },
        // 实现不了，原因：无法检测到<select>失去焦点
        // managerId: { validator: validateManagerId, trigger: 'change' },
        introduce: { required: true, message: '请输入部门介绍', trigger: 'blur' }
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getManagerList()
  },
  mounted() {},
  methods: {
    // 当<select>框失去焦点时，让element-ui针对<select>框做一个单独的校验
    validateManagerId() {
      setTimeout(() => {
        this.$refs.form.validateField('managerId')
      }, 100)
    },
    async getManagerList() {
      const { data } = await getManagerList()
      this.managerList = data
    },
    submit() {
      this.$refs.form.validate(async flag => {
        if (!flag) return
        console.log('发送请求')
        // await addDepartment(this.form)
        // 关闭弹窗
        // this.isVisible = false
        // // 提示操作成功
        // this.$message.success('操作成功')
        // // 刷新组织架构数据
        // this.$emit('refresh')
        if (this.form.id) {
          await editDepartment(this.form)
        } else {
          await addDepartmentme(this.form)
        }
      })
    },
    add(pid) {
      this.isVisible = true
      this.form = {
        name: '',
        code: '',
        managerId: '',
        introduce: '',
        pid: pid
      }
    },
    edit(data) {
      // 显示弹窗
      this.isVisible = true
      // 拷贝一层地址就是浅拷贝，拷贝对象就是深拷贝
      Object.assign(this.form, data)
      // this.form = data
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
